<template>
    <el-dialog v-model="dialogVisible" title="回放" width="945" :before-close="handleClose">
        <div style="padding: 10px;">
            <el-date-picker style="width: 360px;" v-model="value5" type="dates" placeholder="请选择回放日期" />
            <div class="monitoring-list">
                <div class="monitoring-placeholder">
                    <i class="el-icon-video-camera"></i>
                </div>
            </div>
        </div>
        <!-- <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    Confirm
                </el-button>
            </div>
        </template> -->
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const handleOpen = () => {
    dialogVisible.value = true
}
const handleClose = () => {
    dialogVisible.value = false

}
defineExpose({
    handleOpen
})
</script>
<style lang="scss" scoped>
.monitoring-list {
    background: #EBEFF5;
    border: 1px solid #C0CFF2;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 895px;
    height: 448px;
    margin-top: 16px;

    &:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-color: var(--el-color-primary);
    }
}

.monitoring-name {
    padding: 8px 12px;
    background: #F5F7FA;
    border-bottom: 1px solid #C0CFF2;
    font-size: 14px;
    color: #303133;
}

.monitoring-placeholder {
    height: calc(100% - 36px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;

    i {
        font-size: 32px;
    }
}
</style>